<template>
  <el-row>
    <el-col :span="8">
      <!-- 用户信息卡片 -->
      <el-card shadow="hover" class="user-card">
        <div class="user">
          <img :src="userImg" alt="" class="user-img" />
          <div class="userinfo">
            <p class="name">{{ userInfo.username }}</p>
            <p class="access">{{ userInfo.role }}</p>
          </div>
        </div>
        <div class="login-info">
          <p>上次登录时间：<span>{{ loginInfo.lastLoginTime }}</span></p>
          <p>上次登录地点：<span>{{ loginInfo.lastLoginLocation }}</span></p>
        </div>
      </el-card>
      <!-- 课程信息表格卡片 -->
      <el-card shadow="hover" class="table-card">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column
              v-for="(val, key) in tableLabel"
              :key="key"
              :prop="key"
              :label="val"
          ></el-table-column>
        </el-table>
      </el-card>
    </el-col>
    <!-- 统计数据部分 -->
    <el-col :span="16">
      <div class="num" style="margin: 10px">
        <el-row>
          <el-col :span="10" v-for="item in countData" :key="item.name">
            <el-card :body-style="{ display: 'flex', alignItems: 'center', padding: '10px' }">
              <i class="icon" :class="`el-icon-${item.icon}`" :style="{ background: item.color }"></i>
              <div class="detail">
                <p class="num">￥{{ item.value }}</p>
                <p class="txt">{{ item.name }}</p>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import userImage from '@/assets/images/user.png';

const userImg = userImage;

// Define reactive states
const userInfo = reactive({
  username: 'Admin',
  role: '超级管理员'
});

const loginInfo = reactive({
  lastLoginTime: '2024-08-23',
  lastLoginLocation: '北京'
});

const tableData = ref([
  { name: 'Vue.js 基础课程', todayBuy: 5, monthBuy: 20, totalBuy: 200 },
  { name: 'React.js 进阶课程', todayBuy: 3, monthBuy: 18, totalBuy: 150 },
  { name: 'Node.js 全栈开发', todayBuy: 2, monthBuy: 10, totalBuy: 80 },
  { name: 'Python 数据分析', todayBuy: 8, monthBuy: 30, totalBuy: 300 },
]);

const tableLabel = reactive({
  name: '课程',
  todayBuy: '今日购买',
  monthBuy: '本月购买',
  totalBuy: '总购买',
});

const countData = reactive([
  { name: '今日支付订单', value: 1234, icon: 'success', color: '#2ec7c9' },
  { name: '今日收藏订单', value: 210, icon: 'star-on', color: '#ffb980' },
  { name: '今日未支付订单', value: 1234, icon: 's-goods', color: '#5ab1ef' },
  { name: '本月支付订单', value: 1234, icon: 'success', color: '#2ec7c9' },
  { name: '本月收藏订单', value: 210, icon: 'star-on', color: '#ffb980' },
  { name: '本月未支付订单', value: 1234, icon: 's-goods', color: '#5ab1ef' },
]);

// Fetch user info and login info when component is mounted
onMounted(() => {
  // Fetch or set data here
});
</script>


<style scoped>
.el-row {
  margin-top: 20px;
}

.user-card {
  margin-bottom: 20px;
  text-align: center;
}

.user {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.user-img {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  margin-bottom: 20px;
}

.userinfo {
  text-align: center;
}

.table-card {
  margin-left: 20px;
  width: 600px;
}



.icon {
  font-size: 36px;
  color: white;
  padding: 10px;
  border-radius: 50%;
  margin-right: 20px;
}

.detail {
  text-align: left;
}

.num {
  font-size: 24px;
  font-weight: bold;
}

.txt {
  font-size: 16px;
  color: #666;
}
</style>
